<template>
  <div>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :span-method="arraySpanMethod">
      <el-table-column prop="date" label="日期1" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名1" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址1">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-01',
          name: '数量：1',
          first: true,
          children: [{
            id: 11,
            date: '2016-05-02',
            name: '数量：1',
            children: [{
              id: 12,
              date: '2016-05-03',
              name: '数量：1',
              children: [{
                id: 16,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }]
            }]
          }, {
            id: 14,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          first: true,
          id: 20,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          children: [{
            id: 21,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [{
              id: 22,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 23,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }]
          }, {
            id: 24,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }]
      }
    },
    methods: {
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (row.children && row.children.length > 0) {
          if (columnIndex == 0) {
            return [1, 1];
          }
          if (columnIndex == 1) {
            return [1, 2];
          }
          return [0, 0];
        }
      }
    },
  }
</script>
